<template>
    <div class="Plan">
        <TopBar class="t" :title="'我的计划'" action="计划调整" :url="'/index/my'"></TopBar>
        <div class="title">
            <h2 ref="time"><i>2019</i>年<i>10</i>月</h2>
            <span @click="minus" class="left"></span>
            <span @click="adds" class="right"></span>
        </div>
        <div class="calendar">
            <div ref="day" class="day">
                <div class="weekdays">
                    <div>
                        <span class="active">一</span>
                    </div>
                    <div>
                        <span>二</span>
                    </div>
                    <div>
                        <span>三</span>
                    </div>
                    <div>
                        <span>四</span>
                    </div>
                    <div>
                        <span>五</span>
                    </div>
                    <div>
                        <span>六</span>
                    </div>
                    <div>
                        <span>日</span>
                    </div>
                </div>
                <div class="box" ref="box">
                    <div ref="day1" class="days-1">
                            <div>
                                <span>29</span>
                            </div>
                            <div>
                                <span>30</span>
                            </div>
                            <div>
                                <span>31</span>
                            </div>
                            <div>
                                <span>1</span>
                            </div>
                            <div>
                                <span>2</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">3</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">4</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">5</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">6</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">7</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">8</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">9</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">10</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">11</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">12</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">13</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">14</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">15</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">16</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">17</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">18</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">19</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">20</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">21</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">22</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">23</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">24</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">25</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">26</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">27</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">28</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">29</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">30</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">1</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">2</span>
                            </div>
                        </div>
                    <div ref="day2" class="days-2">
                            <div>
                                <span>29</span>
                            </div>
                            <div>
                                <span>30</span>
                            </div>
                            <div>
                                <span>31</span>
                            </div>
                            <div>
                                <span>1</span>
                            </div>
                            <div>
                                <span>2</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">3</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">4</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">5</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">6</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">7</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">8</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">9</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">10</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">11</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">12</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">13</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">14</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">15</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">16</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">17</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">18</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">19</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">20</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">21</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">22</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">23</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">24</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">25</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">26</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">27</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">28</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">29</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">30</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)" class="active">1</span>
                            </div>
                            <div>
                                <span @click="clickChange($event)">2</span>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <CourseCard :title="'OMIN上肢力量课程'"
                        :state="'已完成'"
                        :image="img2"
            ></CourseCard>
            <CourseCard :title="'OMIN上肢力量课程'"
                        :state="'已完成'"
                        :image="img2"
            ></CourseCard>
            <CourseCard :title="'OMIN上肢力量课程'"
                        :state="'已完成'"
                        :image="img2"
            ></CourseCard>
            <CourseCard :title="'OMIN上肢力量课程'"
                        :state="'已完成'"
                        :image="img2"
            ></CourseCard>
            <CourseCard :title="'OMIN上肢力量课程'"
                        :state="'已完成'"
                        :image="img1"
            ></CourseCard>
        </div>
    </div>
</template>

<script>
    import TopBar from "../../../component/TopBar";
    import CourseCard from "../../../component/CourseCard";

    export default {
        name: "Plan",
        data() {
            return {
                img2: require('../../../assets/img/my/plan2.png'),
                img1: require('../../../assets/img/my/plan1.png'),
                instance: null,
                translateX:0,
            }
        },
        components: {
            TopBar,
            CourseCard
        },
        methods: {
            clickHandle() {
                this.$router.push("/search/allcourses");
            },
            minus() {
                if (this.$refs.time.children[1].textContent >= 1) {
                    this.$refs.time.children[1].textContent--
                }
                if (this.$refs.time.children[1].textContent <= 0) {
                    this.$refs.time.children[1].textContent = 12
                    this.$refs.time.children[0].textContent--
                }
                this.translateX+=3.6
                this.$refs.day1.style.left=`${this.translateX}rem`
                this.$refs.day2.style.left=`${this.translateX-3.6}rem`
                this.$refs.box.style.transform=`translateX(-${this.translateX}rem)`
            },
            adds() {
                if (this.$refs.time.children[1].textContent <= 12) {
                    this.$refs.time.children[1].textContent++
                }
                if (this.$refs.time.children[1].textContent > 12) {
                    this.$refs.time.children[1].textContent = 1
                    this.$refs.time.children[0].textContent++
                }
                this.translateX-=3.6
                this.$refs.day2.style.left=`${this.translateX+3.6}rem`
                this.$refs.day1.style.left=`${this.translateX}rem`
                this.$refs.box.style.transform=`translateX(${-this.translateX}rem)`
            },
            clickChange(e) {
                if (this.instance) {
                    let bool = this.instance.className.indexOf('active')
                    if (bool !== -1) {
                        this.instance.className = 'active'
                    } else {
                        this.instance.className = ""
                    }
                }
                this.instance = e.target
                this.instance.className = e.target.className + ' choose'
            }
        },
    }
</script>

<style lang="stylus" scoped>
    .Plan
        .t
            padding 0.12rem
        .bottom
            padding-left 0.12rem
        .calendar
            padding 0 0.06rem 0.12rem
            .day
                height 2.5rem
                flex-wrap wrap
                .weekdays
                    margin-top 0.1rem
                    display flex
                    .active
                        color black
                    div
                        width 14.28%
                        text-align center
                        color #cccccc
                .box
                  display flex
                  width 200%
                  transition all 0.5s
                  position relative
                  .days-2
                    left 0
                  .days-1
                    left 0
                  .days-1,.days-2
                      position absolute
                      width 3.6rem
                      display flex
                      flex-wrap wrap
                      .choose
                          color white !important
                          width 0.3rem
                          background-image linear-gradient(to right, #897AF3, #6D5EEB)
                          border-radius 50%

                      .active
                          color black

                      div
                          cursor: pointer;
                          display block
                          text-align center
                          width 14.28%
                          color #DCD1CD
                          margin-top 0.15rem

                          span
                              width 0.3rem
                              height 0.3rem
                              display inline-block
                              line-height 0.3rem
                              text-align center

        .title
            padding 0.2rem 0.2rem 0.05rem 0.15rem
            display flex
            justify-content space-between

            h2
                flex 28

            .left
                flex 1
                width 0
                height 0
                border-right 0.09rem solid black
                border-top 0.09rem solid transparent
                transform rotate(135deg)

            .right
                flex 1
                width 0
                height 0
                border-right 0.09rem solid black
                border-top 0.09rem solid transparent
                transform rotate(-45deg)
                margin-top 0.08rem

</style>